<template>
  <view class="likeFx">
		<canvas canvasId="bubble" class="like-fx" :style="{width:width+'px',height:height+'px'}"></canvas>
  </view>
</template>

<script>
  export default {
	name: "LikeFx",
    data() {
      return {
				queue: {},
				ctx: null,
				timer: 0
      }
	},
	props: {
		height: {
			type: Number,
			default: 1920
		},
		width: {
			type: Number,
			default: 375
		}
	},
	mounted: async function() {
		this.ctx = uni.createCanvasContext("bubble");
		this.queue = {};
		console.log("likeFx mounted");
	},
	destroyed: function() {
		console.log("likeFx destoryed");
		this.clearTimer();
	},
  methods: {
		likeClick: function() {
			let image = "/static/likeFx/" + this.getRandomInt(1, 33) + ".png", bubble= {
				id: new Date().getTime(),
				timer: 0,
				opacity: 0,
				pathData: this.generatePathData(),
				image: image,
				factor: {
					speed: 6e-4,//6×10^(-4)=0.0006
					t: .6
				}
			};
			Object.keys(this.queue).length > 0 ? this.queue[bubble.id] = bubble : (this.queue[bubble.id] = bubble,this.bubbleAnimate());
		},
		//生成随机数
		getRandom: function(min, max) {
			return Math.random() * (max - min) + min;
		},
		getRandomInt: function(min, max) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
		},
		generatePathData: function() {
			let width = this.width, height= this.height;
			return [ {
				x: .72 * width,
				y: height
			}, {
				x: this.getRandom(.22 * width, .33 *width),
				y: this.getRandom(.5 * height, .75 * height)
			}, {
				x: this.getRandom(0, .88 * width),
				y: this.getRandom(.25 * height, .5 * height)
			}, {
				x: this.getRandom(0, .88 * width),
				y: this.getRandom(0, .125 * height)
			} ];
		},
		updatePath: function(pathData, factor) {
			let n = pathData[0], i = pathData[1], a = pathData[2], o = pathData[3], r = factor.t, u = 3 * (i.x - n.x), c = 3 * (a.x - i.x) - u, l = o.x - n.x - u - c, d = 3 * (i.y - n.y), s = 3 * (a.y - i.y) - d, f = o.y - n.y - d - s;
			return {
				x: l * (r * r * r) + c * (r * r) + u * r + n.x,
				y: f * (r * r * r) + s * (r * r) + d * r + n.y
			};
		},
		bubbleAnimate: function() {
			let than = this, t = (this.width, this.height);
			Object.keys(this.queue).forEach(function(n) {
				let i = than.queue[+n], a = than.updatePath(i.pathData, i.factor), o = a.x, r = a.y, u = i.factor.speed;
				i.factor.t += u;
				let c = 30;
				c = (t - r) / 1.5, c = Math.min(30, c);
				let l = i.opacity;
				l = r / (.3 * t), l = Math.min(1, l), than.ctx.globalAlpha = l, than.ctx.drawImage(i.image, o - c / 2, r, c, c),
				i.factor.t > 1 && delete than.queue[i.id], r > t && delete than.queue[i.id];
			});
			this.ctx.draw();
			Object.keys(this.queue).length > 0 ? this.timer = setTimeout(function() {than.bubbleAnimate();}, 5) : (this.clearTimer(), this.ctx.draw());
		},
		clearTimer: function() {
			this.timer && clearTimeout(this.timer);
		}
	},
	onShareAppMessage: function() {
		return {
			title: "快来和我们玩转软件开发吧～",
			path: "/pages/about/about?from=share"
		};
	},
  }
</script>

<style>
.like-fx {
    position: fixed;
    right: 0;
    z-index: 1024;
    pointer-events: none;
}
</style>